<template>
  <div class="amap-wrapper">
    <common-header :title="title"></common-header>
    <el-amap class="amap-box"
             vid="map"
             :zoom="zoom"
             ref="map"
             :plugin="plugin">
      <el-amap-marker ref="position-map"></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
import CommonHeader from '@/common/header/Header'
export default {
  props: {
    title: {
      type: String,
      default: '商家地址'
    }
  },
  components: {
    CommonHeader
  },
  data () {
    const _this = this
    return {
      zoom: 13,
      label: {
        content: '长安文化中心',
        offset: [10, 12]
      },
      plugin: [{
        pName: 'PlaceSearch',
        events: {
          init (o) {
            _this.map = o
            // o 是高德地图定位插件实例
            return new Promise((resolve, reject) => {
              o.search(_this.address, (status, result) => {
                if (result && result.poiList) {
                  resolve(result)
                } else {
                  reject(result)
                }
              })
            })
          }
        }
      }],
      map: '',
      coordinate: []
    }
  },
  computed: {
    address () {
      return this.$route.query.address
    }
  },
  watch: {
    map (o) {
      this.init(o)
    }
  },
  methods: {
    init (o) {
      const events = this.plugin[0].events.init(o)
      events.then((res) => {
        const coordinate = res.poiList.pois[0].location
        const name = res.poiList.pois[0].name
        this.$refs.map.$amap.setCenter(coordinate)
        this.$refs['position-map'].$amapComponent.setPosition(coordinate)
        this.$refs['position-map'].$amapComponent.setLabel({
          content: name,
          offset: [10, 12]
        })
        this.$refs['position-map'].$amapComponent.setAnimation('AMAP_ANIMATION_BOUNCE')
      }).catch((e) => {

      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.amap-box
  position absolute
  top 106px
  left 0
  right 0
  bottom 0
</style>
